<template>
  <el-aside class="aside">
    <div class="header">
      <el-input
        class="search-text"
        size="small"
        placeholder="搜索"
        v-model="searchText"
        :prefix-icon="Search"
      >
      </el-input>
      <el-button
        plain
        class="add-btn"
        :icon="Plus"
        title="添加好友"
        @click="onShowAddFriend()"
      ></el-button>
      <AddFriend
        :dialogVisible="showAddFriend"
        @close="onCloseAddFriend"
      ></AddFriend>
    </div>
    <el-scrollbar class="friend-items">
      <div v-for="(friends, i) in friendValues" :key="i">
        <div class="letter">{{ friendKeys[i] }}</div>
        <div v-for="friend in friends" :key="friend.id">
          <FriendItem
            :friend="friend"
            :active="friend.id === activeFriend.id"
            @chat="onSendMessage(friend)"
            @delete="onDelFriend(friend)"
            @click.native="onActiveItem(friend)"
          >
          </FriendItem>
        </div>
        <div v-if="i < friendValues.length - 1" class="divider"></div>
      </div>
    </el-scrollbar>
  </el-aside>
</template>

<script setup lang="ts">
import axios from "@/utils/request";
import { Plus, Search } from "@element-plus/icons-vue";
import { pinyin } from "pinyin-pro";
onMounted(() => {
  axios.get("/api/user/friend/list").then((res) => {
    console.log(res);
    friendList.value = res.data;
  });
});
const friendList = ref([]);
const searchText = ref("");
const showAddFriend = ref(false);
const friendStore = { isFriend: (id: string) => {}, friends: [] } as any;
let activeFriend = reactive({ id: "" });
const emits = defineEmits(["onSendMessage", "onDelFriend", "onActiveItem"]);
function onShowAddFriend() {
  showAddFriend.value = true;
}
function onCloseAddFriend() {
  showAddFriend.value = false;
}
const friendKeys = computed(() => {
  return Array.from(_friendMap.value.keys());
});
const friendValues = computed(() => {
  return Array.from(_friendMap.value.values());
});
function onDelFriend(friend: any) {
  emits("onDelFriend", friend);
}
function onSendMessage(user: any) {
  emits("onSendMessage", user);
}
function onActiveItem(friend: any) {
  emits("onActiveItem", friend);
}

const _friendMap = computed(() => {
  // 按首字母分组
  let map = new Map();
  friendList.value.forEach((f: any) => {
    if (
      f.deleted ||
      (searchText.value && !f.nickName.includes(searchText.value))
    ) {
      return;
    }
    let letter = _firstLetter(f.nickName).toUpperCase();
    // 非英文一律为#组
    if (!_isEnglish(letter)) {
      letter = "#";
    }
    if (f.online) {
      letter = "在线";
    }
    if (map.has(letter)) {
      map.get(letter).push(f);
    } else {
      map.set(letter, [f]);
    }
  });
  // 排序
  let arrayObj = Array.from(map);
  arrayObj.sort((a, b) => {
    // #组在最后面
    if (a[0] == "#" || b[0] == "#") {
      return b[0].localeCompare(a[0]);
    }
    return a[0].localeCompare(b[0]);
  });
  map = new Map(arrayObj.map((i) => [i[0], i[1]]));
  return map;
});
function _firstLetter(strText: string) {
  // 使用pinyin-pro库将中文转换为拼音
  let pyText = pinyin(strText, {
    toneType: "none", // 无声调
    // type: "normal", // 普通拼音
  });
  return pyText[0];
}
function _isEnglish(character: string) {
  return /^[A-Za-z]+$/.test(character);
}
</script>

<style lang="scss" scoped>
.aside {
  outline: none !important;
  user-select: none;
  display: flex;
  flex-direction: column;
  background: var(--im-background);
  width: 260px;
  .header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 8px;

    .add-btn {
      padding: 5px !important;
      margin: 5px;
      font-size: 16px;
      border-radius: 50%;
      width: 26px;
      height: 26px;
      flex-shrink: 0;
    }
  }

  .friend-items {
    flex: 1;

    .letter {
      text-align: left;
      font-size: 12px;
      padding: 5px 15px;
      color: var(--im-text-color-light);
    }
  }
}
</style>
